<template>
  <el-form :model="newapply" label-width="100px" class="demo-ruleForm">
    <h3>申请人：{{name}}</h3>
    <h3>寝室号：{{dorid}}</h3>
    <el-form-item label="选择申请类型">
        <el-select v-model="newapply.type">
          <el-option label="寝室器材损坏" value="寝室器材损坏"></el-option>
          <el-option label="公共器材损坏" value="公共器材损坏"></el-option>
          <el-option label="更换寝室" value="更换寝室"></el-option>
          <el-option label="更改个人信息" value="更改个人信息"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="详情描述">
        <el-input type="textarea" resize="none" rows="8" v-model="newapply.infor" placeholder="不超过1000字"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm()">修改</el-button>
        <el-button @click="resetForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
    name:'EditApply',
    data() {
        return {
            apply:{},
            newapply:{},
            name:JSON.parse(localStorage.getItem('student')).name,
            sid:JSON.parse(localStorage.getItem('student')).sid,
            dorid:JSON.parse(localStorage.getItem('student')).dorid
        }
    },
    methods:{
        submitForm(){
            let _this = this
            axios.get('http://localhost:8081/apply/updata',{params:this.newapply}).then(function(resp){
                alert('修改成功')
            }).catch(function(){
                alert('修改失败')
            })
        },
        resetForm(){
            this.newapply = this.apply
        }
    },
    mounted(){
        let _this = this
        axios.get(`http://localhost:8081/apply/getApplyBySid/${this.sid}`).then(function(resp){
            _this.apply = _this.newapply =resp.data
            if(_this.apply.hmid != null)
            {
                alert('你在干甚莫!')
                _this.$router.replace({path:'/homes'})
            }
        })
    }
}
</script>

<style scoped>
.el-form{
    width: 60%;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
}
</style>